import { URL_CONFIGS } from '@/constants'
import http from '@/utils/http'
import { L7Layer } from '@supermapgis/iclient-mapboxgl'

export async function useL7Layer() {
  const [res, dotData] = await Promise.all([fetch(URL_CONFIGS.FLYLINE_DATA_URL), http.get<any>(URL_CONFIGS.DOY_DATA_URL)])
  const data = await res.text()
  const flydata = eval(data).map((item: any) => {
    return { coord: [item.from.split(',').map((e: any) => e * 1), item.to.split(',').map((e: any) => e * 1)] }
  })

  const dotPoint = new L7Layer({ layerID: 'dotPoint', type: 'PointLayer' })
  dotPoint
    .getL7Layer()
    .source(dotData, { parser: { type: 'json', x: 'lng', y: 'lat' } })
    .shape('circle')
    .color('#ffed11')
    .animate(true)
    .size(40)

  const flyLine = new L7Layer({ layerID: 'flyLine', type: 'LineLayer', options: { blend: 'normal' } })
  flyLine
    .getL7Layer()
    .source(flydata, { parser: { type: 'json', coordinates: 'coord' } })
    .color('#ff6b34')
    .texture('plane')
    .shape('arc')
    .size(15)
    .animate({ duration: 1, interval: 0.2, trailLength: 0.05 })
    .style({ textureBlend: 'replace', lineTexture: true, iconStep: 10 })

  const flyLine2 = new L7Layer({ layerID: 'flyLine2', type: 'LineLayer' })
  flyLine2
    .getL7Layer()
    .source(flydata, { parser: { type: 'json', coordinates: 'coord' } })
    .color('#ff6b34')
    .shape('arc')
    .size(1)
    .style({ lineType: 'dash', dashArray: [5, 5], opacity: 0.5 })

  return { dotPoint, flyLine, flyLine2 }
}
